import Vue from 'vue'

const app = new Vue({
    // el: '#root',
    template: '<div ref="testRef">{{text}}，{{obj.a}}</div>',
    data: {
        text: 0,
        obj: {}
    }
    // watch: { // 组件内的方法 会自动销毁
    //     text (newVal, oldVal) {
    //         console.info('新', newVal, '老', oldVal)
    //     }
    // }
})

app.$mount('#root')

// 定时器
// let i = 0 // ---
setInterval(() => {
    app.text += 1
    app.$data.text += 1 // 可以

    // app.$options.data.text += 1 //  不可以
    // 测试forceUpadate，强制重新渲染组件（影响性能）
    // i++ // ---
    // app.obj.a = i // ---
    // app.$forceUpdate() // ---
    // app.$set(app.obj, 'a', i) // --- 这个方法是告诉instance这个变量也是双向绑定，后期加上去
    // app.$delete
}, 1000)

// console.info(app.$data)
// console.info(app.$el)
// console.info(app.$options)

// 页面数据变化时候 重新渲染数据 触发了render的方法
// app.$options.render = (h) => {
//     return h('div', {}, 'new render function')
// }

// app.$root 其实就是new Vue出来的树状结构
// console.info(app.$root === app)

// console.info(app.$children)

// console.info(app.$slots)
// console.info(app.scopedSlots)

// ref
// console.info(app.$refs)

// 是否是服务端渲染
// console.info(app.$isServer)

// $watch的写法时候，组件离开之后，没有这个变量没有销毁（内存溢出），需要手动销毁
// const unWatch = app.$watch('text', (newVal, oldVal) => {
//     console.info('新', newVal, '老', oldVal)
// })

// 2s后销毁这个变量
// setTimeout(() => {
//     unWatch()
// }, 2000)

// 监听事件（on和emit都只能同时作用一个vue对象）
// $once 只会触发一次
// app.$on('testHandler', (a, b) => {
//     console.info('testHandler emited', a, b)
// })

// app.$emit('testHandler', 1, 2)

// vue 渲染是异步